import dash_bootstrap_components as dbc
from dash import html, Input, Output, State
from server import app

fade_html = html.Div(
    [
        html.Br(),
        html.P(html.Strong('使用fade组件，使用淡出动画切换应用程序中内容的可见性'
                           'Fade组件可以用来显示和隐藏应用程序中的内容。当可见性被切换时，内容将淡入/淡出。', 
                           style={'color': 'rgb(255, 153, 51)'})),
        html.Br(),
        dbc.Button('点击展现淡入/淡出效果', id='fade-transition-button', class_name='mb-3', n_clicks=0),
        dbc.Fade(
            dbc.Card(
                dbc.CardBody(
                    html.P('这些内容会淡入淡出', className='card-text')
                )
            ),
            id='fade-transition',
            is_in=True,
            style={"transition": "opacity 1500ms ease"},
            timeout=1500,
        ),
    ]
)

@app.callback(
    Output('fade-transition', 'is_in'),
    [Input('fade-transition-button', 'n_clicks')],
    [State('fade-transition', 'is_in')],
)
def toggle_fade(n, is_in):
    if not n:
        return True
    return not is_in